{extend name="common/common"/}

{block name="content-header"}
<h1>
    用户详情
    <small>Optional description</small>
</h1>
<ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
    <li class="active">Here</li>
</ol>
{/block}

{block name="content"}
<div class="row">
    <div class="col-md-3">

        <!-- Profile Image -->
        <div class="box box-primary">
            <div class="box-body box-profile">
                <img class="profile-user-img img-responsive img-circle" src="{$user.avatar|default='__ROOT__/static/common/img/avatar.png'}" alt="User profile picture">

                <h3 class="profile-username text-center">
                    {switch name="user.gender"}
                    {case value="1"}<i class="fa fa-mars text-aqua"></i>{/case}
                    {case value="2"}<i class="fa fa-venus text-maroon"></i>{/case}
                    {default /}
                    {/switch}
                    {$user.nickname}
                </h3>
                <p class="text-muted text-center"><i class="fa fa-mobile fa-lg"></i> {$user.mobile}</p>

                <ul class="list-group list-group-unbordered">
                    <li class="list-group-item">
                        <b>余额</b> <a class="pull-right">{:number_format($user.user_balance, 2)}元</a>
                    </li>
                    <li class="list-group-item">
                        <b>总收入</b> <a class="pull-right">{:number_format($user.total_incomes,2)}元</a>
                    </li>
                    <li class="list-group-item">
                        <b>邀请总数</b> <a class="pull-right">{:number_format($user.followers)}</a>
                    </li>
                    <li class="list-group-item">
                        <b>状态</b> <a class="pull-right">{$user.user_status.text}</a>
                    </li>
                </ul>

                <a href="{:url('edit', ['user_id' => $user['user_id']])}" class="btn btn-primary btn-block"><b>修改资料</b></a>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->

        <!-- About Me Box -->
        <div class="box box-primary">
            <div class="box-header with-border">
                <h3 class="box-title">About Me</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <strong><i class="fa fa-book margin-r-5"></i> 最后登录信息</strong>
                <p class="text-muted">{:date('Y年m月d日 H:i:s', $user.last_login_time)}，IP地址：{$user.last_login_ip}</p>
                <hr>

                <strong><i class="fa fa-map-marker margin-r-5"></i> 注册信息</strong>
                <p class="text-muted">{:date('Y年m月d日 H:i:s', $user.registered)}，IP地址：{$user.registered_ip}</p>
                <hr>

                <!--<strong><i class="fa fa-pencil margin-r-5"></i> Skills</strong>-->
                <!--<p>-->
                    <!--<span class="label label-danger">UI Design</span>-->
                    <!--<span class="label label-success">Coding</span>-->
                    <!--<span class="label label-info">Javascript</span>-->
                    <!--<span class="label label-warning">PHP</span>-->
                    <!--<span class="label label-primary">Node.js</span>-->
                <!--</p>-->
                <!--<hr>-->

                <strong><i class="fa fa-file-text-o margin-r-5"></i> 邀请人</strong>
                <p>{$user.inviter_name}</p>
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
    <!-- /.col -->
    <!--<div class="col-md-9">-->
        <!--<div class="nav-tabs-custom">-->
            <!--<ul class="nav nav-tabs">-->
                <!--<li class="active"><a href="#activity" data-toggle="tab" aria-expanded="true">Activity</a></li>-->
                <!--<li class=""><a href="#timeline" data-toggle="tab" aria-expanded="false">Timeline</a></li>-->
                <!--<li class=""><a href="#settings" data-toggle="tab" aria-expanded="false">Settings</a></li>-->
            <!--</ul>-->
            <!--<div class="tab-content">-->
                <!--<div class="tab-pane active" id="activity">-->
                    <!--&lt;!&ndash; Post &ndash;&gt;-->
                    <!--<div class="post">-->
                        <!--<div class="user-block">-->
                            <!--<img class="img-circle img-bordered-sm" src="https://cdn.bootcss.com/admin-lte/2.4.2/img/user1-128x128.jpg" alt="user image">-->
                            <!--<span class="username">-->
                          <!--<a href="#">Jonathan Burke Jr.</a>-->
                          <!--<a href="#" class="pull-right btn-box-tool"><i class="fa fa-times"></i></a>-->
                        <!--</span>-->
                            <!--<span class="description">Shared publicly - 7:30 PM today</span>-->
                        <!--</div>-->
                        <!--&lt;!&ndash; /.user-block &ndash;&gt;-->
                        <!--<p>-->
                            <!--Lorem ipsum represents a long-held tradition for designers,-->
                            <!--typographers and the like. Some people hate it and argue for-->
                            <!--its demise, but others ignore the hate as they create awesome-->
                            <!--tools to help create filler text for everyone from bacon lovers-->
                            <!--to Charlie Sheen fans.-->
                        <!--</p>-->
                        <!--<ul class="list-inline">-->
                            <!--<li><a href="#" class="link-black text-sm"><i class="fa fa-share margin-r-5"></i> Share</a></li>-->
                            <!--<li><a href="#" class="link-black text-sm"><i class="fa fa-thumbs-o-up margin-r-5"></i> Like</a>-->
                            <!--</li>-->
                            <!--<li class="pull-right">-->
                                <!--<a href="#" class="link-black text-sm"><i class="fa fa-comments-o margin-r-5"></i> Comments-->
                                    <!--(5)</a></li>-->
                        <!--</ul>-->

                        <!--<input class="form-control input-sm" type="text" placeholder="Type a comment">-->
                    <!--</div>-->
                    <!--&lt;!&ndash; /.post &ndash;&gt;-->

                    <!--&lt;!&ndash; Post &ndash;&gt;-->
                    <!--<div class="post clearfix">-->
                        <!--<div class="user-block">-->
                            <!--<img class="img-circle img-bordered-sm" src="https://cdn.bootcss.com/admin-lte/2.4.2/img/user7-128x128.jpg" alt="User Image">-->
                            <!--<span class="username">-->
                          <!--<a href="#">Sarah Ross</a>-->
                          <!--<a href="#" class="pull-right btn-box-tool"><i class="fa fa-times"></i></a>-->
                        <!--</span>-->
                            <!--<span class="description">Sent you a message - 3 days ago</span>-->
                        <!--</div>-->
                        <!--&lt;!&ndash; /.user-block &ndash;&gt;-->
                        <!--<p>-->
                            <!--Lorem ipsum represents a long-held tradition for designers,-->
                            <!--typographers and the like. Some people hate it and argue for-->
                            <!--its demise, but others ignore the hate as they create awesome-->
                            <!--tools to help create filler text for everyone from bacon lovers-->
                            <!--to Charlie Sheen fans.-->
                        <!--</p>-->

                        <!--<form class="form-horizontal">-->
                            <!--<div class="form-group margin-bottom-none">-->
                                <!--<div class="col-sm-9">-->
                                    <!--<input class="form-control input-sm" placeholder="Response">-->
                                <!--</div>-->
                                <!--<div class="col-sm-3">-->
                                    <!--<button type="submit" class="btn btn-danger pull-right btn-block btn-sm">Send</button>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</form>-->
                    <!--</div>-->
                    <!--&lt;!&ndash; /.post &ndash;&gt;-->

                    <!--&lt;!&ndash; Post &ndash;&gt;-->
                    <!--<div class="post">-->
                        <!--<div class="user-block">-->
                            <!--<img class="img-circle img-bordered-sm" src="https://cdn.bootcss.com/admin-lte/2.4.2/img/user6-128x128.jpg" alt="User Image">-->
                            <!--<span class="username">-->
                          <!--<a href="#">Adam Jones</a>-->
                          <!--<a href="#" class="pull-right btn-box-tool"><i class="fa fa-times"></i></a>-->
                        <!--</span>-->
                            <!--<span class="description">Posted 5 photos - 5 days ago</span>-->
                        <!--</div>-->
                        <!--&lt;!&ndash; /.user-block &ndash;&gt;-->
                        <!--<div class="row margin-bottom">-->
                            <!--<div class="col-sm-6">-->
                                <!--<img class="img-responsive" src="https://cdn.bootcss.com/admin-lte/2.4.2/img/photo1.png" alt="Photo">-->
                            <!--</div>-->
                            <!--&lt;!&ndash; /.col &ndash;&gt;-->
                            <!--<div class="col-sm-6">-->
                                <!--<div class="row">-->
                                    <!--<div class="col-sm-6">-->
                                        <!--<img class="img-responsive" src="https://cdn.bootcss.com/admin-lte/2.4.2/img/photo2.png" alt="Photo">-->
                                        <!--<br>-->
                                        <!--<img class="img-responsive" src="https://cdn.bootcss.com/admin-lte/2.4.2/img/photo3.jpg" alt="Photo">-->
                                    <!--</div>-->
                                    <!--&lt;!&ndash; /.col &ndash;&gt;-->
                                    <!--<div class="col-sm-6">-->
                                        <!--<img class="img-responsive" src="https://cdn.bootcss.com/admin-lte/2.4.2/img/photo4.jpg" alt="Photo">-->
                                        <!--<br>-->
                                        <!--<img class="img-responsive" src="https://cdn.bootcss.com/admin-lte/2.4.2/img/photo1.png" alt="Photo">-->
                                    <!--</div>-->
                                    <!--&lt;!&ndash; /.col &ndash;&gt;-->
                                <!--</div>-->
                                <!--&lt;!&ndash; /.row &ndash;&gt;-->
                            <!--</div>-->
                            <!--&lt;!&ndash; /.col &ndash;&gt;-->
                        <!--</div>-->
                        <!--&lt;!&ndash; /.row &ndash;&gt;-->

                        <!--<ul class="list-inline">-->
                            <!--<li><a href="#" class="link-black text-sm"><i class="fa fa-share margin-r-5"></i> Share</a></li>-->
                            <!--<li><a href="#" class="link-black text-sm"><i class="fa fa-thumbs-o-up margin-r-5"></i> Like</a>-->
                            <!--</li>-->
                            <!--<li class="pull-right">-->
                                <!--<a href="#" class="link-black text-sm"><i class="fa fa-comments-o margin-r-5"></i> Comments-->
                                    <!--(5)</a></li>-->
                        <!--</ul>-->

                        <!--<input class="form-control input-sm" type="text" placeholder="Type a comment">-->
                    <!--</div>-->
                    <!--&lt;!&ndash; /.post &ndash;&gt;-->
                <!--</div>-->
                <!--&lt;!&ndash; /.tab-pane &ndash;&gt;-->
                <!--<div class="tab-pane" id="timeline">-->
                    <!--&lt;!&ndash; The timeline &ndash;&gt;-->
                    <!--<ul class="timeline timeline-inverse">-->
                        <!--&lt;!&ndash; timeline time label &ndash;&gt;-->
                        <!--<li class="time-label">-->
                        <!--<span class="bg-red">-->
                          <!--10 Feb. 2014-->
                        <!--</span>-->
                        <!--</li>-->
                        <!--&lt;!&ndash; /.timeline-label &ndash;&gt;-->
                        <!--&lt;!&ndash; timeline item &ndash;&gt;-->
                        <!--<li>-->
                            <!--<i class="fa fa-envelope bg-blue"></i>-->

                            <!--<div class="timeline-item">-->
                                <!--<span class="time"><i class="fa fa-clock-o"></i> 12:05</span>-->

                                <!--<h3 class="timeline-header"><a href="#">Support Team</a> sent you an email</h3>-->

                                <!--<div class="timeline-body">-->
                                    <!--Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles,-->
                                    <!--weebly ning heekya handango imeem plugg dopplr jibjab, movity-->
                                    <!--jajah plickers sifteo edmodo ifttt zimbra. Babblely odeo kaboodle-->
                                    <!--quora plaxo ideeli hulu weebly balihoo...-->
                                <!--</div>-->
                                <!--<div class="timeline-footer">-->
                                    <!--<a class="btn btn-primary btn-xs">Read more</a>-->
                                    <!--<a class="btn btn-danger btn-xs">Delete</a>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</li>-->
                        <!--&lt;!&ndash; END timeline item &ndash;&gt;-->
                        <!--&lt;!&ndash; timeline item &ndash;&gt;-->
                        <!--<li>-->
                            <!--<i class="fa fa-user bg-aqua"></i>-->

                            <!--<div class="timeline-item">-->
                                <!--<span class="time"><i class="fa fa-clock-o"></i> 5 mins ago</span>-->

                                <!--<h3 class="timeline-header no-border"><a href="#">Sarah Young</a> accepted your friend request-->
                                <!--</h3>-->
                            <!--</div>-->
                        <!--</li>-->
                        <!--&lt;!&ndash; END timeline item &ndash;&gt;-->
                        <!--&lt;!&ndash; timeline item &ndash;&gt;-->
                        <!--<li>-->
                            <!--<i class="fa fa-comments bg-yellow"></i>-->

                            <!--<div class="timeline-item">-->
                                <!--<span class="time"><i class="fa fa-clock-o"></i> 27 mins ago</span>-->

                                <!--<h3 class="timeline-header"><a href="#">Jay White</a> commented on your post</h3>-->

                                <!--<div class="timeline-body">-->
                                    <!--Take me to your leader!-->
                                    <!--Switzerland is small and neutral!-->
                                    <!--We are more like Germany, ambitious and misunderstood!-->
                                <!--</div>-->
                                <!--<div class="timeline-footer">-->
                                    <!--<a class="btn btn-warning btn-flat btn-xs">View comment</a>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</li>-->
                        <!--&lt;!&ndash; END timeline item &ndash;&gt;-->
                        <!--&lt;!&ndash; timeline time label &ndash;&gt;-->
                        <!--<li class="time-label">-->
                        <!--<span class="bg-green">-->
                          <!--3 Jan. 2014-->
                        <!--</span>-->
                        <!--</li>-->
                        <!--&lt;!&ndash; /.timeline-label &ndash;&gt;-->
                        <!--&lt;!&ndash; timeline item &ndash;&gt;-->
                        <!--<li>-->
                            <!--<i class="fa fa-camera bg-purple"></i>-->

                            <!--<div class="timeline-item">-->
                                <!--<span class="time"><i class="fa fa-clock-o"></i> 2 days ago</span>-->

                                <!--<h3 class="timeline-header"><a href="#">Mina Lee</a> uploaded new photos</h3>-->

                                <!--<div class="timeline-body">-->
                                    <!--<img src="http://placehold.it/150x100" alt="..." class="margin">-->
                                    <!--<img src="http://placehold.it/150x100" alt="..." class="margin">-->
                                    <!--<img src="http://placehold.it/150x100" alt="..." class="margin">-->
                                    <!--<img src="http://placehold.it/150x100" alt="..." class="margin">-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</li>-->
                        <!--&lt;!&ndash; END timeline item &ndash;&gt;-->
                        <!--<li>-->
                            <!--<i class="fa fa-clock-o bg-gray"></i>-->
                        <!--</li>-->
                    <!--</ul>-->
                <!--</div>-->
                <!--&lt;!&ndash; /.tab-pane &ndash;&gt;-->

                <!--<div class="tab-pane" id="settings">-->
                    <!--<form class="form-horizontal">-->
                        <!--<div class="form-group">-->
                            <!--<label for="inputName" class="col-sm-2 control-label">Name</label>-->

                            <!--<div class="col-sm-10">-->
                                <!--<input type="email" class="form-control" id="inputName" placeholder="Name">-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div class="form-group">-->
                            <!--<label for="inputEmail" class="col-sm-2 control-label">Email</label>-->

                            <!--<div class="col-sm-10">-->
                                <!--<input type="email" class="form-control" id="inputEmail" placeholder="Email">-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div class="form-group">-->
                            <!--<label for="inputName" class="col-sm-2 control-label">Name</label>-->

                            <!--<div class="col-sm-10">-->
                                <!--<input type="text" class="form-control" id="inputName" placeholder="Name">-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div class="form-group">-->
                            <!--<label for="inputExperience" class="col-sm-2 control-label">Experience</label>-->

                            <!--<div class="col-sm-10">-->
                                <!--<textarea class="form-control" id="inputExperience" placeholder="Experience"></textarea>-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div class="form-group">-->
                            <!--<label for="inputSkills" class="col-sm-2 control-label">Skills</label>-->

                            <!--<div class="col-sm-10">-->
                                <!--<input type="text" class="form-control" id="inputSkills" placeholder="Skills">-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div class="form-group">-->
                            <!--<div class="col-sm-offset-2 col-sm-10">-->
                                <!--<div class="checkbox">-->
                                    <!--<label>-->
                                        <!--<input type="checkbox"> I agree to the <a href="#">terms and conditions</a>-->
                                    <!--</label>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                        <!--<div class="form-group">-->
                            <!--<div class="col-sm-offset-2 col-sm-10">-->
                                <!--<button type="submit" class="btn btn-danger">Submit</button>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</form>-->
                <!--</div>-->
                <!--&lt;!&ndash; /.tab-pane &ndash;&gt;-->
            <!--</div>-->
            <!--&lt;!&ndash; /.tab-content &ndash;&gt;-->
        <!--</div>-->
        <!--&lt;!&ndash; /.nav-tabs-custom &ndash;&gt;-->
    <!--</div>-->
    <!-- /.col -->
</div>
{/block}